<template>
  <div class="news-page-wrap clearfix">
    <transition enter-active-class="animated fadeInDown" leave-active-class="animated slideOutUp">
      <div v-if="msgtips" class="updateTips">
        {{tipsInfor}}
      </div>
    </transition>
    <div id="leftbar" class="left-bar float-left">
      <!-- menu -->
      <div v-for="(item,index) in leftMenu" class="sub-item" :class="{'active':item.status}">
        <span @click="menuDown(item)">{{item.name}}</span>
        <ul :style="{height:item.height+'px'}">
          <li v-for="submenu in item.list" @click="gotoClass(submenu,index)" :class="{'active':submenu.status}">{{submenu.name}}</li>
        </ul>
      </div>
    </div>
    <div id="content" class="center-content float-left">
      <router-view></router-view>
    </div>
    <div class="right-content float-right" :class="{'fixed-right':fixedStatus}">
      <div v-show="rightBarStatus">
        <h3 class="text-center">
          <img src="../../assets/svg/fengniao-flash.svg" alt="">
          蜂鸟快讯
        </h3>
        <div class="feng-niao-right">
          <ul>
            <li v-for="(item, index) in rightFe" :class="{'down':item.down}">
              <h6 class="title" @click="messageDown(index)">
                {{item.content.title}}
              </h6>
              <p class="time">
                {{item.content.date}}
                <a :href="item.content.source_link" target="_blank" class="icon-font icon-link"></a>
              </p>
              <div class="profile">{{item.content.summary}}</div>
            </li>
          </ul>
          <router-link :to="{name: 'alerts', params: {id: 1}}" class="text-center">查看全部快讯&nbsp;&gt;</router-link>
        </div>
      </div>
      <div class="tourongzi">
        <h3 class="text-center">
          <img src="../../assets/svg/startup-daily.svg" alt="">
          最新投融资
        </h3>
        <ul class="tou-zi-right">
          <li v-for="item in rightNew">
            <h5>
              <a :href="item.content.source_link" target="_blank">{{item.content.title}}</a>
            </h5>
            <p>
              {{item.content.data}}
              <a :href="item.content.source_link" class="icon-font icon-link" target="_blank"></a>
            </p>
          </li>
        </ul>
        <router-link :to="{name:'hot', params: {id: 9}}" class="text-center">查看最新投融资&nbsp;&gt;</router-link>
      </div>
    </div>
    <div class="right-fixed-top">
      <feed-back></feed-back>
    </div>
    <div class="right-fixed" v-show="topStatus">
      <to-top></to-top>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import toTop from '../../components/backToTop'
  import backToTop from '../../mixins/backToTop'
  import feedBack from '../../components/feedBack'
  export default {
    name: 'news',
    mixins: [backToTop],
    data () {
      return {
        menu: [],
        down: false,
        fixedStatus: false, // 是否fixed定位
        topStatus: false,
        rightBarStatus: true,  // 蜂鸟快讯是否显示
        isIndex: false, // 是否是蜂鸟快讯栏目  true 是 false 不是
        masklayer: false,
        msgtips: false,
        tipsInfor: '没有发现新内容',
        timeArr: [],
        timeArr1: []
      }
    },
    computed: {
      ...mapState('news', [
        'leftMenu', 'rightFe', 'rightNew', 'currTime'
      ])
    },
    components: {
      toTop,
      feedBack
    },
    created () {
      let data = {}, name = this.$route.name, id = parseInt(this.$route.params.id)
      if (name === 'alerts') {  // 蜂鸟快讯
        data.index = 0
      } else if (name === 'hot') {  // 热门话题
        data.index = 1
      } else if (name === 'subscribe') {  // 我的话题
        data.index = 2
      } else {  // 话题定制
        data.index = 3
      }
      data.id = id
      this.$store.dispatch('news/getMenue', data)
      this.rightBarRester()
      document.addEventListener('scroll', () => {
        (window.scrollY > 300) ? (this.topStatus = true) : (this.topStatus = false)
        if (this.isIndex) {
          this.fixedStatus = true
        } else {
          if (window.scrollY > 400) {
            this.fixedStatus = true
            this.rightBarStatus = false
          } else {
            this.fixedStatus = false
            this.rightBarStatus = true
          }
        }
      }, false)
      this.$store.dispatch('news/getRightContent', {page: 1, pageSize: 5, category_id: 1})
      this.$store.dispatch('news/getRightContent', {page: 1, pageSize: 5, category_id: 2})
    },
    watch: {
      $route () {
        this.backToTop()
        this.rightBarRester()
        this.addLeftMenuStatus()
      }
    },
    methods: {
      menuDown (data) {
        if (data.num === 1) {
          this.$router.push({name: 'alerts', params: {id: 1}})
        } else if (data.num === 2) {
          this.$router.push({name: 'hot', params: {id: 1}})
        } else if (data.num === 3) {
          this.$router.push({name: 'subscribe', params: {id: 1}})
        } else {
          this.$router.push({name: 'custom', params: {id: 1}})
        }
      },
      gotoClass (data, index) {
        if (index === 0) {  // 蜂鸟快讯
          this.$router.push({name: 'alerts', params: {id: data.id}})
          // this.$store.dispatch('news/gettime')   // 更新时间戳
          // if (data.id === 3) {
          //   this.timeArr.push(this.currTime)
          // } else if (data.id === 4) {
          //   this.timeArr1.push(this.currTime)
          // }
          // console.log(data.id, index)
          // console.log(this.currTime)
          // console.log(this.timeArr)
          // console.log(this.timeArr1)
          // let arr = this.timeArr[0]
          // let arr1 = this.timeArr[this.timeArr.length - 1]
          // console.log(arr1 - arr)
          // console.log(arr1)
          // if (arr1 - arr > 60000) {
          //   this.msgtips = true
          //   setTimeout(() => {
          //     this.msgtips = false
          //   }, 3000)
          //   this.timeArr.splice(0, this.timeArr.length)
          // }
        } else if (index === 1) {  // 热门话题
          this.$router.push({name: 'hot', params: {id: data.id}})
        } else if (index === 2) {  // 我的话题
          this.$router.push({name: 'subscribe', params: {id: data.id}})
        } else {  // 话题定制
          this.$router.push({name: 'custom', params: {id: data.id}})
        }
      },
      rightBarRester () {
        let name = this.$route.name
        if (name === 'alerts') {
          this.isIndex = true
          this.rightBarStatus = false
          this.fixedStatus = false
        } else {
          this.isIndex = false
          this.rightBarStatus = true
          this.fixedStatus = true
        }
      },
      messageDown (index) {
        this.$store.commit('news/updataFe', index)
      },
      addLeftMenuStatus () {
        let name = this.$route.name, routerId = parseInt(this.$route.params.id), data = {}
        if (name === 'alerts') { // 如果是创投快讯
          this.fixedStatus = true
          data.index = 0
        } else if (name === 'hot') {
          this.fixedStatus = false
          data.index = 1
        } else if (name === 'subscribe') {
          this.fixedStatus = false
          data.index = 2
        } else {
          this.fixedStatus = false
          data.index = 3
        }
        data.id = routerId
        this.$store.commit('news/modifyStatus', data)
      }
    }
  }
</script>
<style lang="scss">
.news-page-wrap{
  >.left-bar{
    /*position: fixed;*/
    /*top:60px;*/
    /*left:auto;*/
    width:200px;
    padding-top:18px;
    min-height: calc(100% - 135px);
    background-color:#e9edf2;
    font-family:PingFangSC-Regular;
    .sub-item{
      padding:0 8px;
      border-bottom:1px solid #cad0d8;
      >span{
        display: block;
        height:48px;
        line-height:48px;
        font-size:16px;
        color:#1b1d21;
        padding-left:20px;
        cursor: pointer;
      }
      &:nth-child(1) {
        >span:before{
          content:'';
          display: inline-block;
          width:10px;
          height:14px;
          background-image: url(../../assets/svg/chuangtoukuaixun.svg);
          vertical-align: middle;
          margin-right:10px;
        }
      }
      &:nth-child(2) {
        >span:before{
          content:'';
          display: inline-block;
          width:10px;
          height:10px;
          background-image: url(../../assets/svg/renwenhuati.svg);
          vertical-align: middle;
          margin-right:10px;
        }
      }
      &:nth-child(3) {
        >span:before{
          content:'';
          display: inline-block;
          width:14px;
          height:14px;
          background-image: url(../../assets/svg/wodedingyue.svg);
          vertical-align: middle;
          margin-right:10px;
        }
      }
      &:nth-child(4) {
        >span:before{
          content:'';
          display: inline-block;
          width:17px;
          height:18px;
          background: url(../../assets/svg/dingzhizhuizong.svg) no-repeat;
          vertical-align: middle;
          margin-right:10px;
        }
      }
      ul{
        overflow: hidden;
        transition: all .5s ease;
      }
      li{
        padding:8px 0 8px 50px;
        font-size:14px;
        color:#1b1d21;
        cursor: pointer;
        &.active{
          color:#00ba91;
        }
      }
      &.active{
        padding:0;
        >span{
          background-color:#fff;
          position: relative;
          &:after{
            content:'';
            display: block;
            width:2px;
            height:48px;
            background-color: #1b1d21;
            position: absolute;
            left:0;
            top:0;
          }
        }
      }
    }
  }
  >.center-content{
    width:665px;
    /*margin-left:200px;*/
    min-height: 1150px;
    background-color: #fff;
  }
  >.right-content{
    width:270px;
    padding-top:15px;
    &.fixed-right{
      background-color: #fff;
      position: fixed;
      top:60px;
      right: calc((100% - 1145px)/2);
      padding-top:0;
    }
    >div{
      background-color: #fff;
      border: 1px solid #e6eaec;
      padding:30px 18px;
      &:first-child{
        margin-bottom:10px;
      }
    }
    h3{
      font-size: 16px;
      color: #33383e;
      font-weight: normal;
      margin:0 0 38px;
      &:before{
        content:'';
        display: block;
        height:8px;
        border-top:2px solid #33383e;
        border-left:2px solid #33383e;
        border-right:2px solid #33383e;
        margin-bottom:15px;
      }
    }
    h5{
      font-size: 15px;
      color: #24282e;
      margin:0;
      font-weight: bold;
    }
    h6{
      margin:0;
      font-size:14px;
      color:#33383e;
      font-weight: normal;
      cursor: pointer;
      position: relative;
      &:hover{
        color:#00ba91;
      }
      &:before{
        position: absolute;
        left: -8px;
        top: 4px;
        display: block;
        content: "";
        width: 0;
        height: 0;
        line-height: 0;
        border-left: 5px solid #00ba91;
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        transition: all .3s ease;
      }
    }
  }
  .feng-niao-right{
    background-color: #fff;
    li{
      margin-bottom:15px;
    }
    .time{
      margin:5px 0 10px 0;
      font-size:12px;
      color:#aaaaaa;
      a:hover{
        color:#3dab85;
      }
    }
    .profile{
      font-size: 12px;
      line-height: 16px;
      padding: 14px 0;
      border-top: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;
      color: #999;
      display: none;
    }
    .down{
      h6:before{
        transform: rotate(90deg);
      }
      .profile{
        display: block;
      }
    }
    >a{
      display: block;
      line-height:37px;
      font-size:14px;
      background-color: #f5f7f9;
      color:#33383e;
    }
  }
  .tourongzi{
    >a{
      display: block;
      line-height:37px;
      font-size:14px;
      background-color: #f5f7f9;
      color:#33383e;
    }
  }
  .tou-zi-right{
    li{
      padding:8px 6px;
      &:hover{
        background-color: #f6f8fa;
      }
    }
    p{
      margin-top: 10px;
      font-size: 12px;
      color: #aaa;
    }
  }
  .right-fixed-top{
    position: fixed;
    right: 10px;
    bottom: 139px;
  }
  .right-fixed{
    position: fixed;
    right: 10px;
    bottom: 60px;
  }
  .breadcrumb{
    padding:22px;
    span,a{
      font-size: 15px;
      color: #24282e;
    }
    a{
      display: inline-block;
      padding:5px;
      background-color:#00ba91;
      color:#fff;
    }
    span{
      display: inline-block;
      line-height: 27px;
    }
  }
  .label-list-wrap{
    padding:10px 22px;
    font-size: 14px;
    color: #1b1d21;
    .label-box{
      padding-bottom:10px;
      max-height:68px;
      overflow: hidden;
      &.down{
        max-height:100%;
      }
      span{
        display: inline-block;
        padding: 3px 5px;
        font-family: PingFangSC-Regular;
        margin-right: 20px;
        cursor: pointer;
        margin-bottom:10px;
        &.active{
          border: 1px solid #1b1d21;
          border-radius: 2px;
        }
      }
    }
    .select-more{
      transition: border-color .15s ease-in-out;
      border-top: 1px solid #ddd;
      position: relative;
      height: 28px;
      span{
        display: block;
        position: absolute;
        left:50%;
        transition: all .15s ease-in-out;
        transform:translateX(-50%);
        cursor: pointer;
        padding:5px 20px;
        border-left:1px solid #ddd;
        border-right:1px solid #ddd;
        border-bottom:1px solid #ddd;
        top:-1px;
        background-color: #fff;
      }
      &:hover{
        border-top: 1px solid #00ba91;
        span{
          color:#00ba91;
          border-left:1px solid #00ba91;
          border-right:1px solid #00ba91;
          border-bottom:1px solid #00ba91;
        }
      }
    }
  }
}
</style>
